<template>
  <el-col :span="12" >
    <el-card shadow="always" class="dt_card">
      <el-row>
        <div class="floor1_time">
            <div class="time_text" v-if="!isDisabled&&item.promoId!=null"><i class="el-icon-alarm-clock"></i>&nbsp;离秒杀结束：</div>
            <div class="time_text" v-else><i class="el-icon-alarm-clock"></i>&nbsp;秒杀暂未开始</div>
            <div id="countdown-timer2" v-if="!isDisabled&&item.promoId!=null">
              <div class="block"><span id="daysLeft">{{leftTime.day}}</span>天</div>
          
              <div class="block"><span id="hours">{{leftTime.hours}}</span>时</div>
           
              <div class="block"><span id="minutes">{{leftTime.minutes}}</span>分</div>
            
              <div class="block"><span id="seconds">{{leftTime.seconds}}</span>秒</div>
            </div>
        </div>
      </el-row>
      <el-row class="el-row-goods">
        <el-image class="dt-img" :src="item.imgUrl"></el-image>
        <div class="floor1_right_text">
          <div class="floor1_right_title">{{item.title}}</div>
       
          <div class="floor1_three">
            <div class="floor1_price" v-if="!isDisabled&&item.promoId!=null"><div class="red floor1_three_fh">￥</div><div class="red floor1_three_size">{{item.promoPrice}}</div><div class="yh">￥{{item.price}}</div></div>
           
          </div>
        </div>
      </el-row>
      <el-row class="el-row-goods">
        <el-image class="dt-img" :src="item1.imgUrl"></el-image>
        <div class="floor1_right_text">
          <div class="floor1_right_title">{{item1.title}}</div>
        
          <div class="floor1_three">
            <div class="floor1_price" v-if="!isDisabled&&item1.promoId!=null"><div class="red floor1_three_fh">￥</div><div class="red floor1_three_size">{{item1.promoPrice}}</div><div class="yh">￥{{item1.price}}</div></div>
            </div>
        </div>
      </el-row>
      <el-row class="el-row-goods">
        <el-image class="dt-img" :src="item2.imgUrl"></el-image>
        <div class="floor1_right_text">
          <div class="floor1_right_title">{{item2.title}}</div>
        
          <div class="floor1_three">
            <div class="floor1_price" v-if="!isDisabled&&item2.promoId!=null"><div class="red floor1_three_fh">￥</div><div class="red floor1_three_size">{{item2.promoPrice}}</div><div class="yh">￥{{item2.price}}</div></div>
             </div>
        </div>
      </el-row>
    </el-card>
  </el-col>
</template>

<script>
export default {
  name: 'product_detail',
  data () {
    return {
      item: {
        imgUrl:"https://gulimall-xuanxuan.oss-cn-beijing.aliyuncs.com/2022-04-26-21:13:56.162/Snipaste_2022-04-26_20-17-52.jpg",
        title:"高档真丝连衣裙",
        description:"wwww",
        promoId:'11',
        price:'538',
        promoPrice:'438'
      },
      item1: {
        imgUrl:"https://gulimall-xuanxuan.oss-cn-beijing.aliyuncs.com/2022-04-26-21:57:24.222/Snipaste_2022-04-26_21-53-34.jpg",
        title:"网纱甜美连衣裙",
        description:"wwww",
        promoId:'12',
        price:'98',
        promoPrice:'188'
      },
      item2: {
        imgUrl:"https://gulimall-xuanxuan.oss-cn-beijing.aliyuncs.com/2022-04-27-10:13:40.812/Snipaste_2022-04-27_10-00-12.jpg",
        title:"春秋阔腿裤",
        description:"wwww",
        promoId:'13',
        price:'108',
        promoPrice:'158'
      },
      pid: 1,
      isDisabled: false,
      secTime: '', // 秒杀开始时间
      secEndTime: '', // 秒杀结束时间（毫秒值）
      secEndDate: '', // 秒杀结束时间
      isSecKill: '', // 当前秒杀活动是否正在进行
      leftTime: {
        day: '',
        hours: '',
        minutes: '',
        seconds: ''
      },
      endTime:1615601742731,//毫秒时间戳
					day:'0',//天
					hour:'00',//时
					min:'00',//分
					second:'00'//秒
    }
  },
  mounted () {
    // this.$http
    //   .get(baseUrl + '/item/detail?pid=' + this.pid)
    //   .then(res => {
        // 获取item数据
        // this.item = res.data.data
        this.secTime = new Date(1615608742731).getTime()
        this.secEndTime = new Date(1617601742731).getTime()
        // localStorage.setItem('leftTime', this.secEndTime)
        if (this.secTime < new Date().getTime() && new Date().getTime() < this.secEndTime) {
          this.isDisabled = false
        }
        this.isSecKill = this.item.promoId != null && !this.isDisabled
        console.log(this.isSecKill)
        if (this.isSecKill) {
          setInterval(() => {
            let endDate = new Date(this.secEndTime - new Date().getTime())
            this.leftTime.day = endDate.getDay()
            this.leftTime.hours = endDate.getHours()
            this.leftTime.minutes = endDate.getMinutes()
            this.leftTime.seconds = endDate.getSeconds()
          }, 1000)
        }
        console.log(this.secEndDate)
      // })
      // .catch(error => {
      //   console.log(error)
      // })
  },
  methods: {
    toSecKill () {
     
    }
  }
}
</script>

<style scoped>
  .dt_card{margin-bottom: 28px;
  width: 355px;
  height: 530px;
  }
  .el-row-goods{
    margin: 12px 0;

  }
  .dt-img{ cursor: pointer; width: 100px;height: 130px;display: inline-block; float: left ;margin-right: 10px;}
  .floor1_right_text,.floor2_bottom_text{cursor: pointer; margin:auto; float: left;}
  .floor1_right_title{ font-size:18px; font-weight:400; border-bottom:1px dashed #dedede; line-height:60px; }
  .floor1_right_news{ font-size:14px; font-weight:400; color:#a9a9a9; margin:40px 0 0 0;}

  .dt_card .floor1_time{margin-left: 90px; margin-bottom:20px;line-height:23px; }
  .dt_card .floor1_time div{ float:left;  font-size:24px; font-weight:700; color:#f85b00;}
  .dt_card .floor1_time .time_tb{ padding:3px; margin-right:15px;}
  .dt_card .floor1_time  #countdown-timer div { float:left; }
  .dt_card .floor1_time .has{ margin-left:40px; padding:3px;}
  .dt_card .floor1_time .te{ margin-left:5px;}
  .body_1yms .red{ color:#ff4646;}
  .floor1_three{ width:100%;  line-height:68px; }
  .floor1_price  div{ float:left; font-weight:400;}
  .floor1_three_fh{ font-size:25px; color:#f85b00;}
  .floor1_three_size{ color:#f85b00; font-size:50px; line-height:50px;}
  .yh{text-decoration: line-through; font-size:14px; color:#999999; margin-left:10px;}
  .subnow{ float:right; line-height:40px; margin-top:10px;}
  .notsubnow{ float:right; background-color:#ff4646; color:white; font-size:16px; width:150px; height:40px; text-align:center; line-height:40px; margin-top:10px;}
  .ms_floor1,.ms_floor2{ margin-bottom:40px; margin-top:80px;}
  .ms_floor2_title{}
  .floo2_ul{ margin:0; padding:0; }
  .floo2_ul li { width:570px; float:left; list-style-type:none;background-color:#ffffff;height:535px; border:1px solid #dcdcdc; margin-bottom:20px;}
  .floo2_ul li img,.floor1_left img  { width:400px; height:400px;}
  .center{ width:50px; height:535px; float:left;}
  .floor2_right_text{ width:90%; margin:auto;}
  .floor2_right_title{ font-size:18px; font-weight:400;  line-height:60px; }
  .floor2_right_news{ font-size:12px; font-weight:400; color:#a9a9a9; }
  .floor2_three{ width:100%;  line-height:68px; }
  .ms_floor2_title{ margin-bottom:20px;}
  .floor2_right{ float:right;}
  .floor2_right .top{ width:100%; background-color:#ff4646; font-size:14px; line-height:20px;  width:35px; height:20px; text-align:center; color:white;}
  .floor2_right .bottom{ width:100%;line-height:20px;font-size:14px;}
</style>